<script setup>
import { ref } from 'vue'
import Nav_bottom from "../../components/navigation/bottom/nav_bottom.vue";
import {goPostEdit} from "../../tools/go";
import Post from "../../components/neighborhood/post.vue";
import {getNeighborhood, getUserAllPost} from "../../api/neighborhood/neighborhood";
import {baseUrl} from "../../api/http";
import {getUserId} from "../../store";

const nav = [
  {id:1,name:'全部'},
  {id:3,name:'我的发布'}
]

const list = ref([])
const userList = ref([])

const postPage = {
  page: 1,
  size: 5,
  total: 0,
  pageSy:0,
  pageSe:0
}

const getPost = () => {
  getNeighborhood(postPage).then(res => {
    list.value = res.data.records
    postPage.total = res.data.total
  })
}


const userPostPage = ref({
  page: 1,
  size: 5,
  total: 0,
  pageSy:0,
  pageSe:0
})

const getUserPost = () => {
  getUserAllPost(getUserId(),userPostPage.value.page, userPostPage.value.size).then(res => {
      userList.value = res.data.records
      userPostPage.total = res.data.total
  })
}

const init = () => {
  getPost()
  getUserPost()
}

const edit = () => {
    goPostEdit()
}


const pageSy = (val) => {
  postPage.pageSy = val.touches[0].clientY
}

const pageMove = (val) => {
  postPage.pageSe = val.touches[0].clientY
}

const pageSe = () => {
  if (postPage.pageSy - postPage.pageSe > 250
  && (postPage.page * postPage.size) < postPage.total) {
    addPost()
  }
}

const UserPageSy = (val) => {
  userPostPage.pageSy = val.touches[0].clientY
}

const UserPageMove = (val) => {
  userPostPage.pageSe = val.touches[0].clientY
}

const UserPageSe = () => {
  if (userPostPage.pageSy - userPostPage.pageSe > 100
      && (userPostPage.page * userPostPage.size) < userPostPage.total) {
    addPost()
  }
}

const addPost = () => {
  postPage.page++
  getNeighborhood(postPage).then(res => {
    list.value.push(...res.data.records)
  })
}


init()

const activeIndex = ref("全部")
</script>

<template>
<view class="back">

  <view class="head">
    <view class="left">
      <img src="../../static/img/llq.png" alt="">
      <p>邻居圈</p>
    </view>
  </view>
  <!-- nav列表 -->
  <v-tabs align-tabs="center" style="width: 100%" v-model="activeIndex">
    <v-tab
        color="#f66f0e"
        v-for="(item, index) in nav"
        :key="index"
        :active="activeIndex === index"
    >
      {{ item.name }}
    </v-tab>
  </v-tabs>
  <!-- 内容 -->
  <v-container>
    <v-window v-model="activeIndex" >
      <v-window-item>
          <view class="list"
            @touchstart="pageSy"
            @touchmove="pageMove"
            @touchend="pageSe"
          >
            <post
                v-for="i in list"
                :key="i.id"
                :user_avatar="baseUrl + i.avatar"
                :content="i.content"
                :create-time="i.time"
                :comments="i.commentNum"
                :file="i.file"
                :user_nick="i.nickName"
                :id="i.id"
                :likes="i.likesId"
                v-model:likeNum="i.likeNum"
            ></post>
          </view>
      </v-window-item>
      <v-window-item>
          <view
              class="list"
              @touchstart="UserPageSy"
              @touchmove="UserPageMove"
              @touchend="UserPageSe"
          >
            <post
                v-for="i in userList"
                :key="i.id"
                :user_avatar="baseUrl + i.avatar"
                :content="i.content"
                :create-time="i.time"
                :comments="i.commentNum"
                :file="i.file"
                :user_nick="i.nickName"
                :id="i.id"
                :likes="i.likesId"
                :me="true"
                :status="i['status']"
                :message="i.message"
            ></post>
          </view>
      </v-window-item>
      <text class="null">没有了</text>
    </v-window>
  </v-container>




</view>
<!--悬浮按钮-->
<view id="hover_button">
    <v-speed-dial
        location="bottom center"
        transition="fade-transition"
    >
      <template v-slot:activator="{ props: activatorProps }">
        <v-fab
            v-bind="activatorProps"
            size="large"
            icon="mdi-pencil"
            color="blue"
            @click="edit"
        ></v-fab>
      </template>
    </v-speed-dial>
  </view>
<nav_bottom who-active="邻里"></nav_bottom>
</template>

<style scoped lang="scss">
@use "../../static/css/main.scss";
.back{
  @include main.useTheme() {
    .null {
      text-align: center;
      color: #555555;
    }
    //头
    .head{
      .left{
        p{
          font-size: 20px;
          color: main.getVal("primary_text_color");
        }
        img{
          width: 40px;
          height: 40px;
        }
        display: flex;
        align-items: center;
      }
      width: 100%;
      height: 60px;
      background: main.getVal("primary_bg_color");
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px;
    }

    .list{
      padding-bottom: 100px;
    }
  }
  padding-bottom: 100rpx;
}
#hover_button {
  position: fixed;
  bottom: 15vh;
  right: 10vw;
  z-index: 999;
}
</style>